<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<view class="header">
				<view class="points">
					<view class="points_point">
						{{ pageCount }}
					</view>
				</view>
				<view class="header_bottom">
					<text>已上传题库</text>
				</view>
				<view class="buttons" @click="goto">
					上传题库
				</view>
			</view>
			<view class="titles line">
				我的题库
			</view>
			<view class="hahah">
				<scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
					:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
					@refresherrefresh="onRefresh" @refresherrestore="onRestore">
					<view class="items line" v-for="(item, index) in list" :key="index">
						<view class="left">
							<view class="type">
								[ {{ item.auditStatus == '0' ? '待审' : item.auditStatus == '1' ? '未通过' : '通过' }} ]
							</view>
							<view class="title">
								{{ item.name }}
							</view>
							<view class="num" :style="{ color: Number(item.points) > 0 ? 'rgb(179, 173, 173)' : 'red' }">
								{{ (Number(item.points) > 0 ? '+' : '') + item.points }}
							</view>
						</view>
						<view class="right">
							{{ item.createTime }}
						</view>
					</view>
					<view class="zanwu" v-if="list.length == 0">暂无数据</view>
					<u-loadmore v-if="list.length != 0" fontSize="25" :status="status" />

				</scroll-view>
			</view>
		</view>
		<!-- 上传题库 -->
		<u-popup :show="activeShow" mode="center" :round="30">
			<view class="active_pop">
				<view class="clsoe">
					<u-icon name="close-circle" color="#000" size="50" @click="activeShow = false"></u-icon>
				</view>
				<view class="title line">
					上传题库
				</view>
				<view class="active_pop_conent">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item label="等级:" prop="levelName" @click="showgrade = true;">
							<u--input v-model="model1.levelName" disabled placeholder="请选择"></u--input>
							<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
						</u-form-item>
						<u-form-item label="类型:" prop="typeName" @click="showType = true;">
							<u--input v-model="model1.typeName" disabled placeholder="请选择"></u--input>
							<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
						</u-form-item>
						<view class="flex">
							<view class="image-title">图片:</view>
							<UpLoad :fileList="model1.titleImage" name="1" multiple :maxCount="1"
								@onChange="(value) => { model1.titleImage = value }" :place="'图最多可以上传1张'" />
						</view>
						<u-form-item label="题名:" prop="name">
							<u--input v-model="model1.name" clearable placeholder="请输入题名"></u--input>
						</u-form-item>
						<u-form-item label="选项A:" prop="optionA" v-if="model1.typeName == '单选' || model1.typeName == '多选'">
							<u--input v-model="model1.optionA" clearable placeholder="请输入选项A"></u--input>
						</u-form-item>
						<u-form-item label="选项B:" prop="optionB" v-if="model1.typeName == '单选' || model1.typeName == '多选'">
							<u--input v-model="model1.optionB" clearable placeholder="请输入选项B"></u--input>
						</u-form-item>
						<u-form-item label="选项C:" prop="optionC" v-if="model1.typeName == '单选' || model1.typeName == '多选'">
							<u--input v-model="model1.optionC" clearable placeholder="请输入选项C"></u--input>
						</u-form-item>
						<u-form-item label="选项D:" prop="optionD" v-if="model1.typeName == '单选' || model1.typeName == '多选'">
							<u--input v-model="model1.optionD" clearable placeholder="请输入选项D"></u--input>
						</u-form-item>

						<!-- 单选 -->
						<u-form-item label="解答:" prop="answer" v-if="model1.typeName == '单选'" @click="answer1 = true;">
							<u--input v-model="model1.answer" disabled placeholder="请选择"></u--input>
							<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
						</u-form-item>

						<!-- 多选 -->
						<u-form-item label="解答:" prop="answer" v-if="model1.typeName == '多选'" @click="onMultiplePick">
							<u--input v-model="model1.answer" disabled placeholder="请选择"></u--input>
							<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
						</u-form-item>

						<u-form-item label="解答:" prop="answer" v-if="model1.typeName == '简答'">
							<u--input v-model="model1.answer" clearable placeholder="请输入"></u--input>
						</u-form-item>

						<!-- 判断 -->
						<u-form-item label="解答:" prop="answer" v-if="model1.typeName == '判断'" @click="answer2 = true;">
							<u--input v-model="model1.answer" disabled placeholder="请选择"></u--input>
							<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
						</u-form-item>

						<u-form-item label="内容:" prop="answerDesc">
							<u--textarea v-model="model1.answerDesc" maxlength="-1" clearable placeholder="请输入内容"
								autoHeight></u--textarea>
						</u-form-item>
					</u--form>
					<view class="buttons" @click="submit">
						我要上传
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 类型 -->
		<u-picker keyName="name" @confirm="confirm($event, '类型')" closeOnClickOverlay title="类型" :show="showType"
			:columns="typeColumns" @close="showType = false" @cancel="showType = false"></u-picker>
		<!-- 所属等级 -->
		<u-picker keyName="name" @confirm="confirm($event, '所属等级')" closeOnClickOverlay title="所属等级" :show="showgrade"
			:columns="gradeColumns" @close="showgrade = false" @cancel="showgrade = false"></u-picker>
		<!-- 解答单选 -->
		<u-picker keyName="name" @confirm="confirm($event, '单选')" closeOnClickOverlay title="解答" :show="answer1"
			:columns="gansweroneColumns" @close="answer1 = false" @cancel="answer1 = false"></u-picker>
		<!-- 解答判断 -->
		<u-picker keyName="name" @confirm="confirm($event, '判断')" closeOnClickOverlay title="解答" :show="answer2"
			:columns="ganswertwoColumns" @close="answer2 = false" @cancel="answer2 = false"></u-picker>
		<!-- 多选 -->
		<multiples ref="multiplePick" key-name="name" :list="ganswerthreeColumns" @confirm="onMultiplePickConfirm">
		</multiples>
	</view>
</template>

<script>
import {
	systemInfo
} from '../../utils/mixin'
import multiples from './multiples.vue'
import { listUserLevel, getDicts, addQuestion, questionmyList } from '@/api/index.js'
import UpLoad from '../../components/upLoad/index.vue'
export default {
	components: { UpLoad, multiples },
	mixins: [systemInfo],
	data() {
		return {
			list: [{
				type: '通过',
				title: '龙龙都是很大吗？恐龙都是10米以上的，龙都是很大吗',
				num: '1000',
				date: '2024/12/10'
			},
			{
				type: '退回',
				title: '龙龙都是很大吗？恐龙都是10米以上的，龙都是很大吗',
				num: '10',
				date: '2024/12/10'
			},
			{
				type: '通过',
				title: '龙龙都是很大吗？恐龙都是10米以上的，龙都是很大吗',
				num: '10',
				date: '2024/12/10'
			},
			{
				type: '通过',
				title: '龙龙都是很大吗？恐龙都是10米以上的，龙都是很大吗',
				num: '10',
				date: '2024/12/10'
			},
			{
				type: '通过',
				title: '龙龙都是很大吗？恐龙都是10米以上的，龙都是很大吗',
				num: '10',
				date: '2024/12/10'
			},
			{
				type: '通过',
				title: '龙龙都是很大吗？恐龙都是10米以上的，龙都是很大吗',
				num: '10',
				date: '2024/12/10'
			},
			{
				type: '通过',
				title: '龙龙都是很大吗？恐龙都是10米以上的，龙都是很大吗',
				num: '10',
				date: '2024/12/10'
			},
			],
			activeShow: false,

			model1: {
				typeName: '',
				type: '',
				levelId: '',
				levelName: '',
				titleImage: '',
				name: '',
				optionA: '',
				optionB: '',
				optionC: '',
				optionD: '',
				answer: '',

				answerDesc: '',
			},
			rules: {
				name: [{
					type: 'string',
					required: true,
					message: '请输入题名',
					trigger: ['blur', 'change']
				}],
				typeName: [{
					type: 'string',
					required: true,
					message: '请选择类型',
					trigger: ['blur', 'change']
				}],
				levelName: [{
					type: 'number',
					required: true,
					message: '请选择等级',
					trigger: ['blur', 'change']
				}],
				answerDesc: [{
					type: 'string',
					required: true,
					message: '请输入内容',
					trigger: ['blur', 'change']
				}],
				answer: [{
					type: 'string',
					required: true,
					message: '请输入解答',
					trigger: ['blur', 'change']
				}],
			},
			showType: false,
			typeColumns: [],
			showgrade: false,
			gradeColumns: [],
			answer1: false,
			gansweroneColumns: [],
			answer2: false,
			ganswertwoColumns: [],
			answer3: false,
			ganswerthreeColumns: [],


			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			status: 'loadmore',
			triggered: false,
			downRefresh: false,
			pageCount: 0,
		}
	},
	onLoad() {
		// 状态栏高度
		this.getSystemInfo();

		this.getlevelIdList()

		this.triggered = true;
		this.downRefresh = true
		this.queryParams.pageNum = 1
		this.list = []
		this.getcollectList()
	},
	methods: {
		async getlevelIdList() {
			/** 所属等级 */
			const res = await listUserLevel({});
			res.rows.forEach(element => {
				element.name = element.grade
				element.value = element.id
			});
			this.gradeColumns = [res.rows];

			// 类型
			const typeres = await getDicts('djj_question_type')
			typeres.data.forEach(element => {
				element.name = element.dictLabel
				element.value = element.dictValue
			});
			this.typeColumns = [typeres.data]

			// 单选
			const gansweroneColumnsres = await getDicts('djj_question_option')
			gansweroneColumnsres.data.forEach(element => {
				element.name = element.dictLabel
				element.value = element.dictValue
			});
			this.gansweroneColumns = [gansweroneColumnsres.data]
			this.ganswerthreeColumns = gansweroneColumnsres.data

			// 判断
			const ganswertwoColumns = await getDicts('djj_question_true_false')
			ganswertwoColumns.data.forEach(element => {
				element.name = element.dictLabel
				element.value = element.dictValue
			});
			this.ganswertwoColumns = [ganswertwoColumns.data]
		},
		// 多选点击
		onMultiplePick() {
			this.$refs.multiplePick.show();
		},
		goto() {
			this.activeShow = true
		},
		//弹出框确定按钮
		confirm(value, name) {
			if (name == "类型") {
				this.model1.typeName = value.value[0]?.name;
				this.model1.type = value.value[0]?.value;
				this.showType = false
			} else if (name == '所属等级') {
				this.model1.levelName = value.value[0]?.name;
				this.model1.levelId = value.value[0]?.value;
				this.showgrade = false
			} else if (name == '单选') {
				this.model1.answer = value.value[0]?.name;
				this.answer1 = false
			} else if (name == '判断') {
				this.model1.answer = value.value[0]?.name;
				this.answer2 = false
			}
		},
		// 多选确认
		onMultiplePickConfirm(selectedList) {
			this.model1.answer = selectedList.join(',');
			this.$refs.multiplePick.close();
		},
		// 提交
		submit() {
			this.$refs.uForm.validate().then(async (valid) => {
				if (valid) {
					const res = JSON.parse(JSON.stringify(this.model1))
					res.titleImage = '/' + res.titleImage
					await addQuestion(res)
					uni.$u.toast('提交成功')
					this.model1 = {
						typeName: '',
						type: '',
						levelId: '',
						levelName: '',
						titleImage: '',
						name: '',
						optionA: '',
						optionB: '',
						optionC: '',
						optionD: '',
						answer: '',
						answerDesc: '',
					}
					this.activeShow = false
					this.triggered = true;
					this.downRefresh = true
					this.queryParams.pageNum = 1
					this.list = []
					this.getcollectList()
				}
			})
		},



		async getcollectList() {
			const res = await questionmyList({ ...this.queryParams })
			this.pageCount = res.total
			res.rows.forEach(element => {
				element.createTime = element.createTime.split(' ')[0].replace(/-/g, "/")
			});
			//停止加载中
			this.triggered = false;
			this.downRefresh = false
			//处理完逻辑停止刷新
			uni.stopPullDownRefresh();
			if (this.list.length >= this.pageCount) {
				this.status = 'nomore';
			} else {
				let arr = [...this.list, ...res.rows]
				this.list = arr
				if (res.rows.length < 10) {
					this.status = 'nomore';
				}
			}
		},

		//触底加载
		lowerBottom() {
			if (this.queryParams.pageNum < this.pageCount) {
				if (!this.downRefresh) {
					this.downRefresh = true
					this.status = 'loading';
					this.queryParams.pageNum += 1
					this.getcollectList()
				}
			}
		},
		onRefresh() {
			this.triggered = true;
			this.downRefresh = true
			this.queryParams.pageNum = 1
			this.list = []
			this.getcollectList()
		},
		onRestore() {
			this.triggered = false; // 需要重置
		},
	}
}
</script>

<style lang="less" scoped>
.content {
	background-color: rgb(245, 245, 245);
	width: 100%;
	box-sizing: border-box;

	.flex {
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.image-title {
			margin-right: 30rpx;
			width: 80rpx;
			font-size: 15px;
		}
	}

	/deep/.u-form {
		margin-top: 20rpx !important;
	}

	/deep/.u-form-item__body__left {
		width: 110rpx !important;
	}

	/deep/.u-border {
		border: none !important;
	}

	/deep/.u-form-item__body__right__content__slot {
		background-color: rgb(246, 246, 246) !important;
	}

	/deep/.u-input__content__field-wrapper__field {
		background-color: rgb(246, 246, 246) !important;
	}

	/deep/.u-input {
		background-color: rgb(246, 246, 246) !important;
	}

	/deep/.u-form-item__body__right__content {
		background-color: rgb(246, 246, 246) !important;
	}

	/deep/.u-textarea {
		background-color: rgb(246, 246, 246) !important;
	}

	/deep/.item__body__right__content__icon {
		margin-right: 10rpx !important;
	}

	.red {
		color: red;
	}

	.line {
		border-bottom: 1px solid rgba(179, 173, 173, 0.2);
	}

	.active_pop {
		position: relative;
		width: 670rpx;
		height: 570px;

		box-sizing: border-box;
		padding: 20rpx;

		.title {
			text-align: center;
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
		}

		.active_pop_conent {
			height: calc(570px - 70rpx);
			overflow-y: auto;
		}

		.clsoe {
			position: absolute;
			z-index: 2;
			right: 20rpx;
			top: 20rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.buttons {
			margin: 50rpx auto 0;
			width: 300rpx;
			height: 80rpx;
			background-color: rgba(34, 175, 229);
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			border-radius: 10rpx;
			letter-spacing: 20rpx;
		}
	}

	.view {
		width: calc(100% - 60rpx);
		height: calc(100% - 60rpx);
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		top: 30rpx;
		margin: auto;
		overflow: auto;
		border-radius: 15px;

		.hahah {
			width: 100%;
			height: calc(100% - 274px);

			.zanwu {
				font-size: 30rpx;
				color: #b3adad;
				text-align: center;
				margin-top: 20px;
			}


			.box_scroll {
				height: 100%;
			}
		}

		.header {
			margin: 90rpx 0;

			.points {
				font-size: 80rpx;
				color: red;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				font-weight: 700;
				color: rgba(34, 175, 229);

				.points_pre {
					font-size: 26rpx;
					font-weight: normal;
					margin-bottom: 16rpx;
					margin-left: 10rpx;
				}
			}

			.header_bottom {
				margin-top: 30rpx;
				font-size: 26rpx;
				color: rgb(179, 173, 173);
				text-align: center;
			}

			.buttons {
				margin: 50rpx auto 0;
				width: 400rpx;
				height: 80rpx;
				background-color: rgba(34, 175, 229);
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				font-size: 36rpx;
				border-radius: 10rpx;
				letter-spacing: 4rpx;
			}
		}

		.titles {
			font-size: 28rpx;
			color: rgb(179, 173, 173);
			line-height: 2;
		}

		.items {
			padding: 30rpx 0;
			width: 100%;
			box-sizing: border-box;

			.left {
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 26rpx;

				.type {}

				.title {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-left: 10rpx;
				}
			}

			.right {
				color: rgb(179, 173, 173);
				font-size: 22rpx;
				margin-top: 30rpx;
				margin-left: 100rpx;
			}

		}
	}
}
</style>